<!DOC //PE html>,
  <html>

  <head>
    <meta charset="utf-8" />
    <meta name="robots" content="none" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Open IP-KVM</title>
    <!-- <link rel="shortcut icon" href="./favicon.ico" /> -->
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <script>
      document.body.style.overflow = 'hidden';
      document.addEventListener('contextmenu', function (e) {
        e.preventDefault();
      })
      document.addEventListener("touchmove", function (e) {
        e.preventDefault();
      });
      document.addEventListener("scroll", function (e) {
        e.preventDefault();
      });
    </script>
    <div id="app">
      <div v-show="streamSrc" style="display: none">
        <div class="wrapper">
          <div ref="live">
            <img v-if="streamSrc" :src="streamSrc" @focus="onScreenFocus" @blur="onScreenBlur"
              @mousemove="onScreenMouseMove" @mouseup="onScreenMouseUp" @mousedown="onScreenMouseDown"
              @wheel="onScreenMouseWheel" class="screen" tabindex="1" />
          </div>
        </div class="wrapper">
        <div v-show="toolbarVisible" class="float-zone trans-bg">
          <!-- <div>Open IP-KVM</div> -->
          <span class="indicator bi-mouse" style="font-size: 22px" :class="{active: isKeyCaptureActive}"
            title="Mouse Indicator"></span>
          <span class="indicator bi-keyboard" style="font-size: 26px" :class="{active: isKeyCaptureActive}"
            title="Keyboard Indicator"></span>
          <span @click="setDialog('paste')" class="button bi-clipboard-data" title="Remote Paste (ASCII Only)"></span>
          <span @click="setDialog('settings')" class="button bi-gear" title="Settings"></span>
          <span @click="resetDevice()" class="button bi-arrow-clockwise" title="Reset Device"></span>
          <span @click="toggleFullscreen()" class="button bi-fullscreen" title="Fullscreen"></span>
          <span @click="setDialog('help')" class="button bi-question-circle" title="Help"></span>
        </div>

        <div v-show="activeDialog === 'help'" class="dialog trans-bg">
          <div class="dialog-header">Help</div>
          <ul class="auto">
            <li>
              Mouse
              <ul>
                <li>Click anywhere to use mouse</li>
                <li>Hold <b>Ctrl + Alt</b> and <b>click</b> to hide cursor</li>
              </ul>
            </li>
            <li>
              Keyboard
              <ul>
                <li>Press <b>Enter</b> to enter key capture mode</li>
                <li>press <b>Shift + ESC</b> to exit</li>
              </ul>
            </li>
            <li>
              Remote Paste
              <ul>
                <li>Quickly input to remote device</li>
                <li>ASCII characters only</li>
              </ul>
            </li>
          </ul>
          <div class="dialog-footer">
            <button class="dialog-btn" @click="setDialog()">OK</button>
          </div>
        </div>

        <div v-show="activeDialog === 'settings'" class="dialog trans-bg">
          <div class="dialog-header">Settings</div>
          <ul class="auto">
            <li>
              Width:
              <label>
                <input type="number" name="width" min="0" max="9999" step="5" v-model="set_width">
              </label>
            </li>
            <li>
              Height:
              <label>
                <input type="number" name="height" min="0" max="9999" step="5" v-model="set_height">
              </label>
            </li>
            <li>
              Format:
              <select v-model="set_fmt">
                <option v-for="option in avail_fmt" :value="option" v-text="option"></option>
              </select>
            </li>
            <li>
              Quality:
              <label>
                <input type="number" name="quality" min="0" max="100" step="5" v-model="set_quality">
              </label>
            </li>
            <li>
              Mouse Speed (hide cursor mode):
              <label>
                <input type="number" name="mouse_speed" min="1" max="100" step="1" v-model="set_mouse_speed">
              </label>
            </li>
          </ul>
          <div class="dialog-footer">
            <button class="dialog-btn" @click="setDialog(), cancelSettings()">Cancel</button>
            <button class="dialog-btn" @click="setDialog(), applySettings()">Apply</button>
          </div>
        </div>


        <div v-show="activeDialog === 'paste'" class="dialog trans-bg">
          <div class="dialog-header">Remote Paste</div>
          <textarea v-model="pasteContent" class="remote-paste-textarea"></textarea>
          <div class="dialog-footer">
            <button class="dialog-btn" @click="setDialog(), doRemotePaste()">
              Paste
            </button>
            <button class="dialog-btn" @click="setDialog()">Cancel</button>
          </div>
        </div>

      </div>

      <div v-show="!streamSrc" class="loading">Loading...</div>

    </div>

    <script src="https://fastly.jsdelivr.net/npm/vue@2.7.13/dist/vue.min.js"></script>

    <script type="module" src="./app.mjs"></script>

    <script nomodule>
      alert('Opps, no es module support');
    </script>
  </body>

  </html>
